<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>我的预约</title>
	<link rel="stylesheet" type="text/css" href="js/font-awesome/css/font-awesome.css" />
	<link rel="stylesheet" type="text/css" href="css/common.css" />
	<link rel="stylesheet" type="text/css" href="css/myAppointment.css" />
	<script type="text/javascript" src="js/common/jquery-1.11.0.js"></script>
	<!-- <script src="//lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script> -->
	<script type="text/javascript" src="js/common/baseUrl.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
	<script type="text/javascript" src="js/artTemplate/template.js"></script>
	<script type="text/javascript" src="js/common/avalon.js"></script>

</head>

<body ms-controller="test">
	<div id="yuyueheader">
		<div class="top">
			<div class="top-left">
				<i class="fa fa-home fa-fw"></i>
				<a href="javascript:void(0)" class="one">门户首页</a>
			</div>
			<div class="top-right">

				<a class="one" href="javascript:void(0)">
					<i class="fa fa-qrcode fa-fw"></i> 下载APP
				</a>
				<a href="javascript:void(0)">
					<i class="fa fa-commenting-o fa-fw"></i>我的消息
				</a>
				<a href="javascript:void(0)">
					<i class="fa fa-cart-arrow-down fa-fw"></i>购物车
				</a>
				<a href="javascript:void(0)">
					<i class="fa fa-cog fa-fw"></i>系统设置
				</a>
				<a class="zhuli">
					<i class="fa fa-user"></i> 朱莉
				</a>
				<a href="javascript:void(0)">
					退出
				</a>
			</div>
		</div>
	</div>
	<div id="myAppointment">
		<div class="topbigbox">
			<div class="topbar">
				<div class="img">
					<img src="img/husheng.png" />
				</div>
				<div class="nav">
					<ul>
						<a href="#">
							<li>我的互生</li>
						</a>
						<a href="myOrder.html">
							<li>我的订单</li>
						</a>
						<a href="#">
							<li>我的求职</li>
						</a>
						<a href="myAppointment.html">
							 <li class='onenavchange'>我的预约</li>
						</a>
						<a href="myCoupon.html">
							<li>我的卡券</li>
						</a>
						<a href="concern.html">
							<li>关注收藏</li>
						</a>
					</ul>
				</div>
				<!--*****建议反馈***-->
				<div class="suggest">
					<img src="img/fankui.png" />
					<span>建议反馈</span>
				</div>
			</div>
		</div>
		<div class="contentnav">
			<ul>
				<li class="contentnavchange">休闲娱乐</li>
				<li>婚庆</li>
				<li>车交易</li>
			</ul>
		</div>
		<div class="appointmentlist">
			<div class="one">
				<ul>
					<li class="onechange" onclick="getData(-1)">全部</li>
					<li onclick="getData(3)">已预约</li>
					<li onclick="getData(5)">已完成</li>
					<li onclick="getData(2)">已取消</li>
				</ul>
			</div>
			<!--**********预约详情***************-->
			<div class="boxcon">


				<!--全部-->
				<div class="allinfor posibox block">
					<div class="detail" ms-for="(index, item) in @msg">
						<div class="detailone">
							<div class="img">
								<img src="img/eva1.png" />
							</div>
							<span class="name">{{@item.shopName}}</span>
							<span class="num">({{@item.entResno}})</span>
						</div>
						<div class="detailtwo">
							<div class="picture">
								<img src="img/goods_img.png" />
							</div>
							<div class="detailinfor">
								<p class="praice">{{@item.goodsName}}</p>
								<p class="wraper">下单时间:
									<span class="time">{{@item.orderCreateTime}}</span>
								</p>
								<p class="wraper"> 预计到店人数:
									<span class="number">{{@item.exceptMemberCount}}</span>
								</p>
								<p class="wraper">预计到店时间:
									<span class="time">{{@item.applyServiceDate}}</span>
								</p>
							</div>
							<div class="detail-serive">
								<p class="serivepeo">服务人员</p>
								<div class="seriveinfor">
									<div class="touxiang">
										<img :attr="{src:@picUrl+@item.voList[0].headUrl}" />
									</div>
									<div class="serive">
										<div class="serivename">
											{{@item.voList[0].jobName}}
										</div>
										<div class="seriveidentify">
											{{@item.voList[0].servicePost}}
										</div>
										<div class="seriveidentify">
											<span class="sex">
												{{@item.voList[0].sex}}
											</span>
											<span> </span>
											<span class="sex">
												{{@item.voList[0].age}}岁
											</span>
											<span> </span>
											<span class="sex">
												从业{{@item.voList[0].workedYears}}年
											</span>

										</div>
									</div>
								</div>
							</div>
							<div class="appointmented">
								{{@item.orderBasicStateName}}
							</div>
						</div>
						<div class="detailthree" ms-if="@item.orderBasicState==3">
							<div class="cancelbutton">
								取消预约
							</div>
							<div class="surebutton">
								确认到店
							</div>
						</div>
						<div class="detailthree" ms-if="@item.orderBasicState==5">
							<div class="surebutton">
								去评价
							</div>
						</div>
						<div class="detailthree" ms-if="@item.orderBasicState==1">
							<div class="cancelbutton">
								取消预约
							</div>
						</div>
					</div>
				</div>

				<!--已预约-->
				<div class="yiyuyue posibox">
					<div class="detail" ms-for="(index, item) in @msg">
						<div class="detailone">
							<div class="img">
								<img src="img/eva1.png" />
							</div>
							<span class="name">{{@item.shopName}}</span>
							<span class="num">({{@item.entResno}})</span>
						</div>
						<div class="detailtwo">
							<div class="picture">
								<img src="img/goods_img.png" />
							</div>
							<div class="detailinfor">
								<p class="praice">{{@item.goodsName}}</p>
								<p class="wraper">下单时间:
									<span class="time">{{@item.orderCreateTime}}</span>
								</p>
								<p class="wraper"> 预计到店人数:
									<span class="number">{{@item.exceptMemberCount}}</span>
								</p>
								<p class="wraper">预计到店时间:
									<span class="time">{{@item.applyServiceDate}}</span>
								</p>
							</div>
							<div class="detail-serive">
								<p class="serivepeo">服务人员</p>
								<div class="seriveinfor">
									<div class="touxiang">
										<img :attr="{src:@picUrl+@item.voList[0].headUrl}" />
									</div>
									<div class="serive">
										<div class="serivename">
											{{@item.voList[0].jobName}}
										</div>
										<div class="seriveidentify">
											{{@item.voList[0].servicePost}}
										</div>
										<div class="seriveidentify">
											<span class="sex">
												{{@item.voList[0].sex}}
											</span>
											<span> </span>
											<span class="sex">
												{{@item.voList[0].age}}岁
											</span>
											<span> </span>
											<span class="sex">
												从业{{@item.voList[0].workedYears}}年
											</span>

										</div>
									</div>
								</div>
							</div>
							<div class="appointmented">
								{{@item.orderBasicStateName}}
							</div>
						</div>
						<div class="detailthree" ms-if="@item.orderBasicState==3">
							<div class="cancelbutton">
								取消预约
							</div>
							<div class="surebutton">
								确认到店
							</div>
						</div>
						<div class="detailthree" ms-if="@item.orderBasicState==5">
							<div class="surebutton">
								去评价
							</div>
						</div>
						<div class="detailthree" ms-if="@item.orderBasicState==1">
							<div class="cancelbutton">
								取消预约
							</div>
						</div>
					</div>
				</div>
				<!--已完成-->
				<div class="yiwancheng posibox">
					<div class="detail" ms-for="(index, item) in @msg">
						<div class="detailone">
							<div class="img">
								<img src="img/eva1.png" />
							</div>
							<span class="name">{{@item.shopName}}</span>
							<span class="num">({{@item.entResno}})</span>
						</div>
						<div class="detailtwo">
							<div class="picture">
								<img src="img/goods_img.png" />
							</div>
							<div class="detailinfor">
								<p class="praice">{{@item.goodsName}}</p>
								<p class="wraper">下单时间:
									<span class="time">{{@item.orderCreateTime}}</span>
								</p>
								<p class="wraper"> 预计到店人数:
									<span class="number">{{@item.exceptMemberCount}}</span>
								</p>
								<p class="wraper">预计到店时间:
									<span class="time">{{@item.applyServiceDate}}</span>
								</p>
							</div>
							<div class="detail-serive">
								<p class="serivepeo">服务人员</p>
								<div class="seriveinfor">
									<div class="touxiang">
										<img :attr="{src:@picUrl+@item.voList[0].headUrl}" />
									</div>
									<div class="serive">
										<div class="serivename">
											{{@item.voList[0].jobName}}
										</div>
										<div class="seriveidentify">
											{{@item.voList[0].servicePost}}
										</div>
										<div class="seriveidentify">
											<span class="sex">
												{{@item.voList[0].sex}}
											</span>
											<span> </span>
											<span class="sex">
												{{@item.voList[0].age}}岁
											</span>
											<span> </span>
											<span class="sex">
												从业{{@item.voList[0].workedYears}}年
											</span>

										</div>
									</div>
								</div>
							</div>
							<div class="appointmented">
								{{@item.orderBasicStateName}}
							</div>
						</div>
						<div class="detailthree" ms-if="@item.orderBasicState==3">
							<div class="cancelbutton">
								取消预约
							</div>
							<div class="surebutton">
								确认到店
							</div>
						</div>
						<div class="detailthree" ms-if="@item.orderBasicState==5">
							<div class="surebutton">
								去评价
							</div>
						</div>
						<div class="detailthree" ms-if="@item.orderBasicState==1">
							<div class="cancelbutton">
								取消预约
							</div>
						</div>
					</div>
				</div>
				<!--已取消-->
				<div class="yiquxiao posibox">
					<div class="detail" ms-for="(index, item) in @msg">
						<div class="detailone">
							<div class="img">
								<img src="img/eva1.png" />
							</div>
							<span class="name">{{@item.shopName}}</span>
							<span class="num">({{@item.entResno}})</span>
						</div>
						<div class="detailtwo">
							<div class="picture">
								<img src="img/goods_img.png" />
							</div>
							<div class="detailinfor">
								<p class="praice">{{@item.goodsName}}</p>
								<p class="wraper">下单时间:
									<span class="time">{{@item.orderCreateTime}}</span>
								</p>
								<p class="wraper"> 预计到店人数:
									<span class="number">{{@item.exceptMemberCount}}</span>
								</p>
								<p class="wraper">预计到店时间:
									<span class="time">{{@item.applyServiceDate}}</span>
								</p>
							</div>
							<div class="detail-serive">
								<p class="serivepeo">服务人员</p>
								<div class="seriveinfor">
									<div class="touxiang">
										<img :attr="{src:@picUrl+@item.voList[0].headUrl}" />
									</div>
									<div class="serive">
										<div class="serivename">
											{{@item.voList[0].jobName}}
										</div>
										<div class="seriveidentify">
											{{@item.voList[0].servicePost}}
										</div>
										<div class="seriveidentify">
											<span class="sex">
												{{@item.voList[0].sex}}
											</span>
											<span> </span>
											<span class="sex">
												{{@item.voList[0].age}}岁
											</span>
											<span> </span>
											<span class="sex">
												从业{{@item.voList[0].workedYears}}年
											</span>

										</div>
									</div>
								</div>
							</div>
							<div class="appointmented">
								{{@item.orderBasicStateName}}
							</div>
						</div>
						<div class="detailthree" ms-if="@item.orderBasicState==3">
							<div class="cancelbutton">
								取消预约
							</div>
							<div class="surebutton">
								确认到店
							</div>
						</div>
						<div class="detailthree" ms-if="@item.orderBasicState==5">
							<div class="surebutton">
								去评价
							</div>
						</div>
						<div class="detailthree" ms-if="@item.orderBasicState==1">
							<div class="cancelbutton">
								取消预约
							</div>
						</div>
					</div>
				</div>
				<!--分页-->
				<!--<div class="fenye">
				<div class="qian">
					<i class="fa fa-angle-left"></i>
					<span>上一页</span>
				</div>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
				</ul>
				<span class="dian">...</span>
				<div class="next">
					<span>下一页</span>
					<i class="fa fa-angle-right"></i>
				</div>
				<span class="total">共100页,</span>
				<span class="jump">跳到</span>
				<span class="shuzi">3</span>
				<span class="ye">页</span>
				<div class="sure">确定</div>
			</div>					-->
			</div>
			<!--底部-->
			<!--<div class="bottom">
				<div class="inset">
					<i class="fa fa-hand-o-right"></i>
					<span class="date">2013-2018</span>
					<span class="company">深圳市互生科技有限公司</span>
					<span class="icp">奥ICP备14100052号</span>
					<span class="icp">奥公网安备   44030402000494号</span>
				</div>
			</div>-->
</body>
<script type="text/javascript">
	console.log("aaaaaaaaaaaaa");
	//		三级导航互换发生的事件
	$(".one ul li").click(function() {
		$(".one ul li").removeClass("onechange");
		$(this).addClass("onechange").siblings()
		//			$(this).addClass('block').siblings().removeClass('block');
		var i = $(".one ul li").index(this);
		console.log(i)
		$('.boxcon .posibox').eq(i).addClass('block').siblings().removeClass('block');
		console.log($('.boxcon .posibox').eq(i))
	});
	//		二级导航互换发生的事件
	$(".contentnav ul li").click(function() {
		console.log("我变了")
		$(".contentnav ul li").removeClass("contentnavchange")

		$(this).addClass("contentnavchange")
	});
	//		一级导航互换发生的事件
	$(".nav ul li").click(function() {
		$(this).addClass('navchange').siblings().removeClass('navchange')
	})

	function getData(index) {
		$.ajax({
			type: "get",
			url: baseUrl + 'hsent-xxyl-user/orderDetailFree/listOrderDetailFree',
			data: {
				pageNo: 1,
				pageSize: 5,
				status: index,

			},
			success: function(res) {
				console.log(res);
				if (typeof(res.data) != "string") {
					for (var i = 0; i < res.data.length; i++) {
						res.data[i].applySerivceStaffs = JSON.parse(res.data[i].applySerivceStaffs);
						if (res.data[i].voList[0].sex == 0) {
							res.data[i].voList[0].sex = "女"
						} else {
							res.data[i].voList[0].sex = "男"
						}
					}
				}

				vm.msg = [];

				vm.msg = res.data;
				console.log(vm.msg)
			}
		})
	}
	getData(-1);
	var vm = avalon.define({
		$id: "test",
		name: "司徒正美",
		msg: [],
		picUrl: picUrl,
		show: function(msg) {
			var obj = obj
			if (obj) {
				return true
			}
			return false
		}
	})
	// vm.$watch('onReady', function() {
	//
	// })
</script>

</html>
